<template>
  <div class="dataInspect">
    <div style="flex: 1">
      <el-card shadow="never">
        <div slot="header" style="display: flex;align-items: center;justify-content: space-between;">
          <n-tab :options="tabOptions" @click="tabCheckHandler"/>
          <div class="ha-top">
          <el-input
                  placeholder="名称搜索"
                  size="small"
                  v-model="selectFormModel.name"
                  @keyup.enter.native="onSearch"
                  style="margin-right: 10px;"
              >
                <i slot="suffix" class="el-input__icon el-icon-search"></i>
          </el-input>
          <el-select v-model="selectFormModel.areaId"
          style="margin-right: 10px;" placeholder="地市" size="mini" clearable @change="onSearch">
                <el-option
                    v-for="item in cityList"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
              <el-checkbox v-model="selectFormModel.surveyTag"   style="margin-right: 10px;" @change="onSearch">有此调查类</el-checkbox>
              </div>
        </div>
        <data-table
            :api="getTaskList"
            ref="dataTable"
            :options="options"
            :columns="columns"
            :operates="operates"
            :query="selectFormModel"
        ></data-table>
      </el-card>
    </div>
  </div>
</template>

<script lang="ts">
import {Component, Ref, Vue} from 'vue-property-decorator';
import DataTable from "@/components/DataTable/DataTable.vue";
import NTab from "@/components/NTab.vue";
import {getTaskList, getLatestReportFileId} from "@/api/inspectTask";
import {userAreaTreeSelectData} from "@/api/area"
import { simpleStartList} from '@/api/investWork';
import {Message} from "element-ui";
@Component({
  methods: { userAreaTreeSelectData},
  components: {NTab, DataTable}
})
export default class dataUpdate extends Vue {
  @Ref('dataTable') private dataTable: any;
  @Ref('areaTreeSelect') private areaTreeSelect: any;
  public getTaskList:any;

  workData:any;
  tabOptions:any=[];
  //区划树参数
  areaDialog: any = {
    selectParams: {
      clearable: true,
      placeholder: '请选择区划'
    },
    treeParams: {
      clickParent: true,
      filterable: true,
      accordion: true,
      data: [],
      props: {
        children: 'children',
        label: 'label',
        disabled: 'disabled',
        value: 'id'
      }
    }
  };
  //区划树搜索过滤
  areaSearchFun(value: any): void {
    this.areaTreeSelect.filterFun(value);
  }
  areaTreeClear(){
    this.onSearch()
  }

  tabCheckHandler(data){
    this.getTaskList = getTaskList;
    this.selectFormModel.workId = data.item.id;
    this.dataTable.refreshData(getTaskList);
  }
  //区划切换
  parentAreaChange(data: any, node: any, mv: any) {
    this.onSearch()
  }
  columns: any = [
    {label: '任务名称', prop: 'name', sortable: 'custom'},
    {label: '质检数量', prop: 'inspectCount', sortable: 'custom'},
    {label: '质检未通过数量', prop: 'failCount', sortable: 'custom'},
    {
      label: '有此调查类', prop: 'surveyTag', formatter: function (row: any) {
        if (row && row.surveyTag === '1') {
          return '有此调查类';
        } else {
          return '无此调查类';
        }
      }
    },
    {label: '创建人', prop: 'createByName', sortable: 'custom', showOverflowTooltip: true},
    {label: '最新质检时间', prop: 'createTime', sortable: 'custom'},
    {
      label: '任务状态', prop: 'taskState', sortable: 'custom', render: function (createElement, context) {
        if (context && context.row && context.row.taskState === '2') {
          return createElement('el-tag', {
                attrs: {
                  type: 'success'
                }
              }, ['已质检']
          );
        } else if (context && context.row && context.row.taskState === '1'){
          return createElement('el-tag', {
                attrs: {
                  type: ''
                }
              }, ['质检中']
          );
        } else {
          return createElement('el-tag', {
                attrs: {
                  type: 'info'
                }
              }, ['待质检']
          );
        }
      }
    },
    {
      label: '质检状态', prop: 'inspectState', sortable: 'custom', render: function (createElement, context) {
        if (context && context.row && context.row.inspectState === '1') {
          return createElement('el-tag', {
                attrs: {
                  type: 'success'
                }
              }, ['已通过']
          );
        } else {
          return createElement('el-tag', {
                attrs: {
                  type: 'danger'
                }
              }, ['未通过']
          );
        }
      }
    },
  ];

  // table 的参数
  options: any = {
    stripe: true, // 是否为斑马纹 table
    loading: false, // 是否添加表格loading加载动画
    highlightCurrentRow: true, // 是否支持当前行高亮显示
    multipleSelect: false, // 是否支持列表项选中功能
  };


  //按钮操作组
  operates: any = {
    title: '操作',
    width: 'auto',
    fixed: 'right',
    list: [
      {
        label: '查看',
        type: 'success',
        plain: true,
        disabled: (index: any, row: any) => {
          return false;
        },
        permission: 'bus:data:edit',
        method: (index: any, row: any) => {
          this.$router.push({ path: '/quality/dataInspect/detail', query:{taskId:row.id, taskName:row.name,taskState:row.taskState}});
        }
      },
      {
        label: '下载报告',
        type: 'primary',
        plain: true,
        permission: 'bus:data:edit',
        disabled: (index: any, row: any) => {
          return false;
        },
        method: (index: any, row: any) => {
          this.downloadReport(row)
        }
      }
    ]
  };
  selectFormModel: any = {
    name: '',
    areaId: '',
    surveyTag: '',
    workId:'',
  };
  onSearch(): void {
    this.dataTable.refresh();
  }

  //下载报告
  downloadReport(row: any) {
    getLatestReportFileId({taskId: row.id}).then(res=> {
      if (res.data) {
        const link = document.createElement('a');
        link.href = process.env.VUE_APP_BASE_API +'/resources/file/'+res.data.fileId;
        link.setAttribute('download','test.doc');
        link.click();
        link.remove();
      } else {
        Message.error("未生成质检报告")
      }
    })
  }

  mounted() {

    simpleStartList().then(res =>{
      this.workData =res.data;
      this.workData.forEach(wd =>{
        this.tabOptions.push({label:wd.name,id:wd.id});
      })
 
      this.tabCheckHandler({item:this.tabOptions[0]});
    });
    userAreaTreeSelectData().then(res => {
      if (res.data) {
        this.areaDialog.treeParams.data = res.data;
        if (this.areaTreeSelect) {
          this.areaTreeSelect.treeDataUpdateFun(res.data);
        }
      }
    });
  }

  activated() {
    this.onSearch();
  }
}
</script>
<style lang="scss" scoped>
.dataInspect {
  display: flex;
  gap: 10px;

  .ha-top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .radio-t {
      display: flex;
      align-items: center;
      gap: 6px;

      span {
        font-size: 14px;
      }
    }
  }
}
.m-b10{
  height: 40px;
}
</style>
